<template>
  <el-container style="height: 100%; display: flex; flex-direction: column;">
  <el-header style="display: flex; justify-content: space-between; align-items: center;">
    <el-dropdown @command="handleFilter">
      <el-button type="primary" style="width:10vw;">
        {{ Filter }}<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown" style="text-align: center;">
        <el-dropdown-item command="全部">全部</el-dropdown-item>
        <el-dropdown-item v-for="(item, index) in tableTitle" :command="item.label">{{ item.label }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-input v-model="search" placeholder="请输入内容" clearable="true" style="width: 20vw;"></el-input>
    <el-button @click="handleSearch" :disabled="search ? false : true">搜索</el-button>
    <el-button @click="handleReset">重置</el-button>
    <el-button @click="handleRefresh">刷新</el-button>
  </el-header>

  <el-main style="flex: 1; overflow-y: auto;">
    <el-table :data="paginatedData" style="width:100%" v-loading="loading">
      <el-table-column v-for="(item, index) in tableTitle" align="center" :key="index" :prop="item.tableProp" :label="item.label" :formatter="formatFlag" :width="item.width"></el-table-column>

      <el-table-column align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-main>

  <el-footer style="text-align: center;">
    <el-pagination
        layout="total, prev, pager, next"
        :total="tableData.length"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange">
    </el-pagination>
  </el-footer>
  </el-container>
</template>

<script>
import http from '@/utils/http';

export default {
  data() {
    return {
      loading: false,
      filteredList: [],
      Filter: '全部',
      search: "",
      currentPage: 1,
      pageSize: 10,
      allInfo: [],
      tableTitle: [
        { tableProp: "id", label: "记录ID"},
        { tableProp: "type", label: "出入者类型" },
        // { tableProp: "carId", label: "车辆ID" },
        { tableProp: "carNumber", label: "车牌号" },
        { tableProp: "landlordId", label: "业主ID" },
        { tableProp: "landlordName", label: "业主姓名" },
        { tableProp: "exitType", label: "出入类型" },
        { tableProp: "exitTime", label: "出入时间", width: '180' },
        { tableProp: "doorAddress", label: "门禁位置" },
      ],
      tableData: [],
      form: {
        id: '',
        carNumber: '',
        exitType: '',
        exitTime: '',
        doorAddress: '',
        landlordId: '',
        type: '',
        carId: '',
        landlordName: ''
      },
      originalForm: null,
      formLabelWidth: '120px',
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.tableData.slice(start, end);
    }
  },
  mounted() {
    this.getAllData();
  },
  methods: {
    handleRefresh() {
      this.getAllData();
    },
    formatFlag(row,column,cellValue){
      // { tableProp: "id", label: "记录ID" },
      // { tableProp: "carNumber", label: "车牌号" },
      // { tableProp: "exitType", label: "出入类型" },
      // { tableProp: "exitTime", label: "出入时间" },
      // { tableProp: "doorAddress", label: "门禁位置" },
      // { tableProp: "landlordId", label: "业主ID" },
      // { tableProp: "type", label: "出入者类型" },
      // { tableProp: "carId", label: "车辆ID" },
      // { tableProp: "landlordName", label: "业主姓名" }
      if (column.property === 'exitType') {
        return cellValue === 0 ? '出' : '入';
      }
      if (column.property === 'type') {
        return cellValue === 0 ? '业主' : '车辆';
      }
      return cellValue;
    },
    getAllData() {
      this.loading = true;
      http.get("/admin/door/getAllExitLog")
          .then((response) => {
            const Result = response.data;
            this.allInfo = Result.data;
            // 根据进出时间降序排序
            this.allInfo.sort((a, b) => {
              return new Date(b.exitTime) - new Date(a.exitTime);
            });
            this.tableData = this.allInfo;
            this.loading = false;
          }).catch(function (error) {
        console.error(error);
      });
    },
    handleReset() {
      this.search = "";
      this.Filter = "全部";
      this.tableData = this.allInfo;
    },
    handleFilter(command) {
      this.Filter = command;
    },
    handleSearch() {
      if (this.search) {
        if (this.Filter === "全部") {
          this.tableData = this.allInfo.filter(item => {
            return Object.keys(item).some(key => {
              return this.tableTitle.some(title => title.tableProp === key) &&
                  item[key] && item[key].toString().toLowerCase().includes(this.search.toLowerCase());
            });
          });
        } else {
          const nowtable = this.tableTitle.find(item => item.label === this.Filter).tableProp;
          this.tableData = this.allInfo.filter(item => {
            const value = item[nowtable] ? item[nowtable].toString().toLowerCase() : '';
            return value.includes(this.search.toLowerCase());
          });
        }
      }
    },
    //删除按键
    handleDelete(row) {
      this.$confirm('此操作将永久删除条目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.deleteData(row);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //删除操作
    deleteData(row) {
      this.tableData = this.tableData.filter(item => item != row);
      this.allInfo = this.tableData;

      const totalPages = Math.ceil(this.allInfo.length / this.pageSize);
      if (this.currentPage > totalPages) {
        this.currentPage -= 1;
      }

      http.get("/admin/door/deleteExitLog", {
        params: {
          id: row.id
        }
      }).then(response => {
        console.log(response.data.data);
      })
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    //取消操作
    cancel() {
      if (this.isCreateMode === false) {
        this.form = {...this.originalForm};
      }
      this.dialogFormVisible = false;
      this.isEditable = false;
    },
  }
}
</script>

<style scoped lang="scss">
</style>